<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>患者信息管理</title>
    <!-- App css -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .pageinfo a {
            font-size: 16px;
            text-decoration: none;
            display: inline-block;
            background: #fff;
            color: #888;
            margin: 8px;
            text-align: center;
            padding: 10px;
            min-width: 18px;
            border: 1px solid #E2E2E2;
        }

        .pageinfo {
            text-align: center;
        }

        .pageinfo .active {
            background-color: #02c0ce;
            border: 1px solid #02c0ce;
            color: #FFF;
        }

        .btn-custom {
            color: #fff;
            background-color: #02c0ce;
            border-color: #02c0ce;
        }
    </style>
</head>
<body>
<div id="myApp" style="padding: 20px 60px">

    <div style="margin: 10px 5px;height: 40px">
        <button type="button" class="btn btn-custom" style="float: left;margin-right: 200px;" @click="isAdd=true">添加患者信息</button>
        <span>
                <input type="text" class="form-control" v-model="orgcode" placeholder="机构编码"
                       style="width: 120px; margin-right: 10px;float: left;">
                <button type="button" class="btn btn-custom" @click="latestVisit(1)">查询患者最新访视</button>
                <button type="button" class="btn btn-custom" @click="modification()">更新建档时间</button>
            </span>
        <span style="float: right;">
                <input type="text" class="form-control" v-model="searchName" placeholder="查询姓名"
                       style="width: 300px;float: left; margin-right: 10px">
                <button type="button" class="btn btn-custom" @click="search()">搜索</button>
                <button type="button" class="btn btn-custom" onClick="window.location.reload()">刷新</button>
            </span>
    </div>
    <table style="margin: 0 auto" class="table table-centered">
        <tr>
            <th>编号</th>
            <th>患者姓名</th>
            <th>机构编码</th>
            <th>建档时间</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        <tr v-for="p in pageinfo.list">
            <td v-text="p.id"></td>
            <td v-text="p.name"></td>
            <td v-text="p.orgcode"></td>
            <td v-text="p.dtFill"></td>
            <td v-text="p.dtCreate"></td>
            <td>
                <button type="button" class="btn btn-custom" @click="amend(p)">编辑</button>
                <button type="button" class="btn btn-custom" @click="del(p.id)">删除</button>
            </td>
        </tr>
    </table>
    <pagelist :pageinfo="pageinfo" @skiplist="pageskip"></pageList>

    <div style="padding-top: 50px;width: 800px;margin: 0 auto">
        <div style="width: 350px;float: left" v-if="isAdd">
            <h3>新增</h3>
            <table>
                <tr>
                    <td>姓名:</td>
                    <td>
                        <input type="text" class="form-control" style="width: 180px;" v-model="news.name">
                    </td>
                </tr>
                <tr>
                    <td>机构编码:</td>
                    <td>
                        <input type="text" class="form-control" style="width: 180px;" v-model="news.orgcode">
                    </td>
                </tr>
                <tr>
                    <td>建档时间:</td>
                    <td>
                        <input type="date" class="form-control" style="width: 180px;" v-model="news.dtFill">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <button type="button" class="btn btn-custom" @click="add()">保存</button>
                        <button type="button" class="btn btn-custom" @click="isAdd=false">取消</button>
                    </td>
                </tr>
            </table>
        </div>
        <div style="width: 350px;float: right" v-if="up">
            <h3>修改</h3>
            <table>
                <tr>
                    <td>姓名:</td>
                    <td>
                        <input type="text" class="form-control" style="width: 180px;" v-model="up.name">
                    </td>
                </tr>
                <tr>
                    <td>机构编码:</td>
                    <td>
                        <input type="text" class="form-control" style="width: 180px;" v-model="up.orgcode">
                    </td>
                </tr>
                <tr>
                    <td>建档时间:</td>
                    <td>
                        <input type="date" class="form-control" style="width: 180px;" v-model="up.dtFill">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <button type="button" class="btn btn-custom" @click="update()">保存</button>
                        <button type="button" class="btn btn-custom" @click="up=null">取消</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>

</div>

<!--bootstrap js-->
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue-2.5.17.js"></script>
<script>

    Vue.component("pagelist", {
        template: `
					<div class="pageinfo" >
						<a href="javascript:;" v-if="!pageinfo.isFirstPage" @click="vueskip(pageinfo.firstPage)">首页</a>
						<a href="javascript:;" v-if="!pageinfo.isFirstPage" @click="vueskip(pageinfo.pageNum - 1)">上一页</a>
						<a href="javascript:;" v-for="num in pageinfo.navigatepageNums" :class="[num == pageinfo.pageNum ? 'active' : '']" @click="vueskip(num)">{{num}}</a>
						<a href="javascript:;" v-if="!pageinfo.isLastPage" @click="vueskip(pageinfo.pageNum + 1)">下一页</a>
						<a href="javascript:;" v-if="!pageinfo.isLastPage" @click="vueskip(pageinfo.pages)">尾页</a>
					</div>`,
        props: ['pageinfo'],
        methods: {
            vueskip(n) {
                this.$emit("skiplist", n);
            },
        }
    });


    var vm = new Vue({
        el: "#myApp",
        data: {
            pageinfo: {},
            searchName: "",
            orgcode: "",
            isLatestVisit: false,
            isAdd:false,
            news: {
                name: "",
                orgcode: "",
                dtFill: null
            },
            up: null
        },
        created() {
            this.pageskip(1);
        },
        methods: {
            //查询
            search() {
                this.isLatestVisit = false;
                this.pageskip(1);
            },

            //分页查询方法
            pageskip(n) {
                if (this.isLatestVisit) {
                    this.latestVisit(n);
                    return;
                }
                let searchUrl = this.searchName ? "&searchName=" + this.searchName : '';
                axios.get("/patient/page?page=" + n + "&limit=3" + searchUrl).then(res => {
                    this.pageinfo = res.data;
                })

            },

            //最新访视查询
            latestVisit(n) {
                if (!this.orgcode) {
                    alert("请填写机构编号!");
                    return;
                }
                this.isLatestVisit = true;
                axios.get("/patient/queryOneMonthInterview?page=" + n + "&limit=3&orgcode=" + this.orgcode).then(res => {
                    this.pageinfo = res.data;
                })
            },

            //删除方法
            del(n) {
                if (!confirm("您确定要删除?")) {
                    return;
                }
                axios.delete("/patient/delete/" + n).then(res => {
                    if (res.data = 1) {
                        alert("删除成功!");
                    } else {
                        alert("删除失败!");
                    }
                    window.location.reload();
                })
            },

            modification() {
                if (!this.orgcode) {
                    alert("请填写机构编号!");
                    return;
                }
                if (!confirm("您要把" + this.orgcode + "编号机构下所有患者建档时间为2018年1月1日以后的且存在访视记录的患者的建档时间更改为2019年1月1日?")) {
                    return;
                }
                axios.put("/patient/updatePatient/" + this.orgcode).then(res => {
                    alert("更新成功" + res.data + "条记录!");
                    window.location.reload();
                })
            },

            //新增方法
            add() {
                axios.post("/patient/add", this.news).then(res => {
                    if (res.data = 1) {
                        alert("新增成功!");
                    } else {
                        alert("新增失败!");
                    }
                    window.location.reload();
                })
            },

            amend(p){
                this.up = JSON.parse(JSON.stringify(p));
            },

            //修改方法
            update() {
                axios.put("/patient/update", this.up).then(res => {
                    if (res.data = 1) {
                        alert("修改成功!");
                    } else {
                        alert("修改失败!");
                    }
                    window.location.reload();
                })
            }

        }
    });
</script>
</body>
</html>